﻿HmJS.$Import('base.fx.css3');
//HmJS.$Import('core.domready');

HmJS.register('demo.module.base.fx.css3', function ($ns) {
	var that = {};

	that.todoIndex = function () {

		var fx = new Fx.Tween.CSS3('test', {
			duration: 605,
			transition: 'quint:in'
		});

		fx.addEvent('complete', function () {
			console.log('complete')
		});

		var to = 100;
		$('test').addEvent('click', function () {
			fx.start('height', (to == 100 ? (to = 300) : (to = 100)));
		});

		var fx2 = new Fx.Morph.CSS3('test2', {
			duration: 605,
			transition: 'quint:in'
		});

		fx2.addEvent('complete', function () {
			console.log('complete')
		});

		var to2 = 100;
		$('test2').addEvent('click', function () {
			fx2.start({ 'height': [200, (to2 == 100 ? 300 : 100)],
				'width': [200, (to2 == 100 ? (to2 = 300) : (to2 = 100))]
			});
		});


		var fx3 = new Fx.Elements.CSS3($$('.test3'), {
			duration: 605,
			transition: 'quint:in'
		});

		fx3.addEvent('complete', function () {
			console.log('complete')
		});

		var to3 = 100;
		$$('.test3').addEvent('click', function () {
			fx3.start({
				0: {
					'height': [200, (to3 == 100 ? 100 : 300)],
					'width': [200, (to3 == 100 ? 100 : 300)]
				},
				1: {
					'height': [200, (to3 == 100 ? 300 : 100)],
					'width': [200, (to3 == 100 ? (to3 = 300) : (to3 = 100))]
				}
			});
		});
	};

	that.todoTest = function () {
		var Global = {};

		Global.imgs = $$('#test img');

		Global.setCSS2 = function () {

			$('css2').addClass('current');

			Global.imgs[0].setStyle('z-index', 1);
			Global.imgs[1].setStyles({
				'opacity': 0,
				'z-index': 2
			});

			var fxs = [
				new Fx.Tween(Global.imgs[0], {
					onComplete: function () {
						Global.imgs[0].setStyle('z-index', 1);
						Global.imgs[1].setStyles({
							'opacity': 0,
							'z-index': 2
						});
					}
				}),
				new Fx.Tween(Global.imgs[1], {
					onComplete: function () {
						Global.imgs[1].setStyle('z-index', 1);
						Global.imgs[0].setStyles({
							'opacity': 0,
							'z-index': 2
						});
					}
				})
			];

			var act = 1;
			(function () {

				fxs[act].start('opacity', 1);
				act = act == 1 ? 0 : 1;

			}).periodical(2000);
		}

		Global.setCSS3 = function () {

			$('css3').addClass('current');

			Global.imgs[0].setStyle('z-index', 1);
			Global.imgs[1].setStyles({
				'opacity': 0,
				'z-index': 2
			});

			var fxs = [
				new Fx.Tween.CSS3(Global.imgs[0], {
					onComplete: function () {
						Global.imgs[0].setStyle('z-index', 1);
						Global.imgs[1].setStyles({
							'opacity': 0,
							'z-index': 2
						});
					}
				}),
				new Fx.Tween.CSS3(Global.imgs[1], {
					onComplete: function () {
						Global.imgs[1].setStyle('z-index', 1);
						Global.imgs[0].setStyles({
							'opacity': 0,
							'z-index': 2
						});
					}
				})
			];

			var act = 1;
			(function () {

				fxs[act].start('opacity', 1);
				act = act == 1 ? 0 : 1;

			}).periodical(2000);
		}

		if (window.location.search == '?css2') {
			//console.log('CSS 2');
			Global.setCSS2();
		} else {
			//console.log('CSS 3');
			Global.setCSS3();
		}
	};

	that.todoTest1 = function () {

		var fx = new Fx.Tween.CSS3('test', {
			duration: 605,
			transition: 'quint:in'
		});

		fx.addEvent('complete', function () {
			console.log('complete');
		});

		var to = 100;
		$('test').addEvent('click', function () {
			//fx.start('height', 100, 300);
			fx.start('height', (to == 100 ? (to = 300) : (to = 100)));
			//fx.cancel.delay(200, fx);
		});

		var fx2 = new Fx.Morph.CSS3('test2', {
			duration: 605,
			transition: 'quint:in'
		});

		fx2.addEvent('complete', function () {
			console.log('complete');
		});

		var to2 = 100;
		$('test2').addEvent('click', function () {
			//fx.start('height', 100, 300);
			fx2.start({ 'height': [200, (to2 == 100 ? 300 : 100)],
				'width': [200, (to2 == 100 ? (to2 = 300) : (to2 = 100))]
			});
			//fx.cancel.delay(200, fx);
		});

	};

	that.todoTest2 = function () {

		var Global = {};

		for (var i = 0; i < 200; i++) new Element('div').addClass('test').inject(document.body);

		var els = $$('.test');

		Global.setCSS2 = function () {

			$('css2').addClass('current');

			Global.timer = (function () {

				if (els.length == 0) {
					clearInterval(Global.timer);
					return;
				}

				var el = els.pop();

				new Fx.Tween(el, {
					duration: 700,
					onComplete: function () {
						this.start('background-color', '#0000ff', '#ffffff');
					}
				}).start('background-color', '#0000ff', '#ffffff');

			}).periodical('50');
		};

		Global.setCSS3 = function () {

			$('css3').addClass('current');

			Global.timer = (function () {

				if (els.length == 0) {
					clearInterval(Global.timer);
					return;
				}

				var el = els.pop();

				new Fx.Tween.CSS3(el, {
					duration: 700,
					onComplete: function () {
						this.start('background-color', '#0000ff', '#ffffff');
					}
				}).start('background-color', '#0000ff', '#ffffff');

			}).periodical('50');
		};

		if (window.location.search == '?css2') {
			//console.log('CSS 2');
			Global.setCSS2();
		} else {
			//console.log('CSS 3');
			Global.setCSS3();
		}
	};

	that.todoTest3 = function () {
		var fx = new Fx.Tween.CSS3('test', {
			duration: 605,
			unit: '%',
			transition: 'quint:in'
		});
		console.log('aaa');
		/*
		fx.addEvent('complete', function(){
		alert('complete');
		});
		*/

		var to = 33;
		$('test').addEvent('click', function () {
			fx.start('height', (to == 33 ? (to = 100) : (to = 33)));
		});
	}

	return that;
});
